<template>
    <div >
        <div style="padding: 35px 15px  15px;">
            <button-tab v-model="fcchart">
                <button-tab-item  @on-item-click="onccItemClick">今日</button-tab-item>
                <button-tab-item @on-item-click="onccItemClick">本月发车统计(截止昨日)</button-tab-item>
            </button-tab>
        </div>

        <!-- <div v-if="fcchart==0" id="fcchart1"  style="width:100%;height:300px"></div> -->
        <div class="reportItem" v-if="fcchart==0">
           
            <div class="body">
                <div class="l-box">
                    <span class="l-title">在途运单</span>
                    <span class="l-text">{{obj.sendCar.count}}</span>
                </div>
                <div class="l-box">
                    <span class="l-title">在途运单金额</span>
                    <span class="l-text">{{obj.sendCar.amount | thousands(2)}}元</span>
                </div>
                    <ul class="line-ul" >
                        <li v-for="item in obj.monthOrderGroup"  class="line-li">
                         <div class="line-title"> {{ item.loadAddressName }} - {{ item.uploadAddressName }}</div>
                         <div class="line-text">
                            <div class="s-box">
                                <span class="s-title">运单数</span>
                                <span class="s-text">{{ item.orderCount }}</span>
                            </div>
                             <div class="s-box">
                                <span class="s-title">金额</span>
                                <span class="s-text">{{ item.orderAmount | thousands(2)}}元</span>
                            </div>
                         </div>
                        </li>
                    </ul>
                <div class="l-box">
                    <span  class="l-title">今日发车</span>
                    <span class="l-text">{{obj.sendCar.todayCount}}</span>
                </div>
               <div class="l-box">
                    <span  class="l-title">今日下单金额</span>
                    <span class="l-text">{{obj.sendCar.todayAmount | thousands(2)}}元</span>
                </div>
                 <ul class="line-ul">
                      <li v-for="item in obj.dayOrderGroup" class="line-li">
                         <div class="line-title"> {{ item.loadAddressName }} - {{ item.uploadAddressName }}</div>
                         <div class="line-text">
                            <div class="s-box">
                                <span class="s-title">运单数</span>
                                <span class="s-text">{{ item.orderCount }}</span>
                            </div>
                             <div class="s-box">
                                <span class="s-title">金额</span>
                                <span class="s-text">{{ item.orderAmount | thousands(2)}}元</span>
                            </div>
                         </div>
                        </li>  
                 </ul>
            </div>
        </div>
        <div v-if="fcchart==1" >
        <div  id="fcchart2" style="width:100%;height:900px;"></div>
</div>
    </div>
</template>

<script>
import Vue from "vue";

import { Grid, GridItem } from "vux";
import { ButtonTab, ButtonTabItem, Divider } from "vux";

export default {
  props: ["obj", "colors"],
  name: "departReport",
  components: {
    ButtonTab,
    ButtonTabItem,
    Divider,
    Grid,
    GridItem
  },
  mounted() {
    // this.fcchart1Draw();
    //this.fcchart2Draw();
  },
  data() {
    return {
      fcchart: 0
    };
  },
  methods: {
    onccItemClick(fcchart) {
      this.fcchart = fcchart;
      if (fcchart == 1) {
        this.fcchart2Draw();
      }
    },
    fcchart2Draw() {
      var _this = this;
     // var routes = ["启和花沟煤矿A-神州宏达堆场", "启和花沟煤矿A-神州宏达堆场", "启和花沟煤矿A-神州宏达堆场"];
     // var counts = [44, 45, 46];
       var counts = _this.obj.address.count;
       var routes = _this.obj.address.title;
      var dataArr = [];
      var itemArr = []; 
      routes.forEach(function(item, key) {
        var obj1 = {
          name: `(${counts[key]})${item}`,
          value: counts[key]
        };
        dataArr.push(obj1);
      });
      dataArr.sort(function(a, b) {
        return b.value - a.value;
      });
      dataArr.forEach(function(item) {
        itemArr.push(item.name);
      });

      var fcchart2 = this.$echarts.init(document.getElementById("fcchart2"));
      fcchart2.setOption({
        tooltip: {
          trigger: "item",
          formatter:
            "<div style='width:120px;white-space: pre-line;'>  [{d}%]{b}</div>"
        },
        legend: {
          show: true,
          orient: "vertical",
          x: "center",
          y: 260,
          data: itemArr
        },
        yAxis: { show: false },
        xAxis: { show: false },
        series: [
          {
            type: "pie",
            radius: ["40%", "60%"],
            center: ["50%", 130],
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                color: function(params) {
                  return _this.colors[params.dataIndex];
                }
              }
            },
            data: dataArr
          }
        ]
      });
    }
  }
};
</script>
<style  lang="less">
.line-ul {
  font-size: 16px;
  margin: 15px 0px;
}
.line-title {
  padding: 5px 15px;
  background: #1cc466;
  color: #ffffff;
}
.line-text {
  background: #f3f5f8;
  padding: 8px 15px;
}
.line-text > .detailItem > span {
  line-height: .533333rem;
  font-size:0;
}
.line-li {
  margin: 15px 0px;
}
.w-60 {
  width: 60px;
}

.l-box{
  width: 100%;
  height: 1.066667rem;
  display: inline-flex;
  position: relative;
}
.l-title{
  font-size: 18px;
  width: 120px;
  padding-left: 15px;
  text-align: justify;
  text-align-last: justify;
  display: inline-block;
}
.l-title::before
{
  content: ":";
  width: 100%;
  position: absolute;
  left: 140px;
}
.l-title:after{
  content: "";
  display: inline-block;
  width: 100%;
}


.l-text{
 padding-left: 15px;
 font-size: 20px;
 color: orange;
 display: inline-block;
}

.l-text:after{
  content: "";
  display: inline-block;
  width: 100%;
}

.s-box{
  width: 100%;
  height:.666667rem;
    position: relative;
}
.s-title{
  width: 60px;
  text-align: justify;
  text-align-last: justify;
  display: inline-block;
}
.s-title::before
{
  content: ":";
  width: 100%;
  position: absolute;
  left:65px;
}
.s-title:after{
  content: "";
  display: inline-block;
  width: 100%;
}


.s-text{
 padding-left: 10px;
 display: inline-block;
 color: #7C8891;
}

.s-text:after{
  content: "";
  display: inline-block;
  width: 100%;
}


</style>